import React, { Component } from 'react'
import { message, Form, Input, Button } from 'antd'
import { modifyPwdReq } from '@/utils/request'
import { connect } from 'react-redux'
import actionCreator from '@/store/actionCreator'

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
}
const buttonItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 4,
    },
  }
}
const mapDispatchToProps = {
  setBreadList: actionCreator.setBreadList
}
@connect(null, mapDispatchToProps)
class Modify extends Component {
  componentDidMount() {
    this.props.setBreadList(['个人信息', '修改密码'])
  }
  render() {
    return (
      <Form
        {...formItemLayout}
        name="modify"
        onFinish={this.onFinish}
        onFinishFailed={this.onFinishFailed}
        scrollToFirstError// 提交失败自动滚动到第一个错误字段
      >
        <Form.Item
          name="oldPassword"
          label="原密码"
          rules={[
            {
              pattern: /^\w{6,10}$/,
              message: '提示: 6-10位字母数字下划线!'
            },
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="password"
          label="新密码"
          rules={[
            {
              pattern: /^\w{6,10}$/,
              message: '提示: 6-10位字母数字下划线!'
            },
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="confirm"
          label="确认新密码"
          dependencies={['password']}
          hasFeedback
          rules={[
            {
              pattern: /^\w{6,10}$/,
              message: '提示: 6-10位字母数字下划线!'
            },
            {
              required: true,
              message: '请输入确认密码!',
            },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject('您输入的两次密码不匹配!');
              },
            }),
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item {...buttonItemLayout}>
          <Button type="primary" htmlType="submit">
            确认修改
              </Button>
        </Form.Item>
      </Form>
    )
  }
  // 请求
  onFinishFailed = errorInfo => {
    // console.log('Failed:', errorInfo);
    message.error({ duration: 1, content: errorInfo.errorFields[0].errors[0] })
  }
  onFinish = values => {
    // 注册请求
    modifyPwdReq(values).then(res => {
      if (res.result) {
        message.success({ duration: 1, content: res.msg })
        this.setState({ visible: false })
      } else {
        message.error({ duration: 1, content: res.msg })
      }
    })
  }
}
export default Modify
